<!-- 人员管理 -->
<template>
  <div
    id="manage"
    :style="{
      backgroundColor: bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)',
      color: bgcColor.color === '#000' ? '#000' : 'rgb(33, 33, 48)'
    }"
  >
    <h2>人员管理</h2>
    <!-- 搜索 -->
    <div
      class="search"
      :style="{
        backgroundColor: bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)',
        color: bgcColor.color === '#000' ? '#000' : 'rgb(33, 33, 48)'
      }"
    >
      <el-row :gutter="20">
        <el-col :lg="8" :md="12">
          <div class="list">
            <div
              class="tit"
              :style="{
                color: bgcColor.color === '#000' ? '#393939' : '#fff'
              }"
            >
              用户名
            </div>
            <el-input v-model="state.serchName"></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row justify="end">
        <el-col :lg="3" :md="6">
          <div class="submit" @click="serchList">搜索</div>
        </el-col>
      </el-row>
    </div>
    <!-- 表单数据 -->
    <el-table :data="state.admintorList" stripe style="width: 100%">
      <!-- 注册时间 -->
      <el-table-column label="注册时间" align="center" width="170">
        <template #default="scope">
          <span>{{ dayjs(scope.row.time, false) }}</span>
        </template>
      </el-table-column>
      <!-- 用户名 -->
      <el-table-column prop="name" label="用户名" align="center" width="120" />
      <!-- 头像 -->
      <el-table-column label="头像" align="center" width="80">
        <template #default="scope">
          <img :src="baseURL + scope.row.avatar" />
        </template>
      </el-table-column>
      <!-- 手机号 -->
      <el-table-column prop="phone" label="手机号码" align="center" width="160">
        <template #default="scope">
          <template v-if="scope.row.phone">
            {{ scope.row.phone }}
          </template>
          <template v-else> 暂未填写 </template>
        </template>
      </el-table-column>
      <!-- 邮箱 -->
      <el-table-column prop="email" label="邮箱" align="center" width="180" />
      <el-table-column label="权限" align="center">
        <template #default="scope">
          <div>
            是否具有删除权限
            <el-switch
              v-model="scope.row.deletepower"
              @click="powerChange(0, scope.row)"
              size="small"
            />
          </div>
          <div>
            是否具有发布权限
            <el-switch
              v-model="scope.row.addpower"
              @click="powerChange(1, scope.row)"
              size="small"
            />
          </div>
          <div>
            是否具有修改权限
            <el-switch
              v-model="scope.row.updatepower"
              @click="powerChange(2, scope.row)"
              size="small"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            type="danger"
            :icon="Delete"
            circle
            @click="handleDelete(scope.row._id)"
        /></template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:currentPage="state.currentPage"
        v-model:page-size="state.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.allNums"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue'
import { useStore } from 'vuex'
import {
  getAdmintorList,
  getAdmintorPageList,
  searchAdmintorList,
  updateAdmintorAuthority,
  deleteAdmintor
} from '@/server/serve/api_admintor'
import { RequsetAdmintorListDataTypes } from '@/server/serve/api_admintor'
import dayjs from '@/utils/dayjs'
import { baseURL } from '@/utils/axios'
import { Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const store = useStore()

const bgcColor = computed(() => store.state.Background)

const state = reactive({
  // 搜索用户名
  serchName: '',
  // 管理员列表
  admintorList: [] as Array<RequsetAdmintorListDataTypes>,
  // 当前分页指向页数
  currentPage: 1,
  // 当前分页显示的条数
  pageSize: 10,
  // 分页显示数剧总数
  allNums: 0,
  // 分页切换是否采用原始数据
  journalListTypeOrlist: true
})

// getAdmintorPageList
// 获取数据
const listRendering = (type = true) => {
  if (type) {
    // 获取管理员总数量
    getAdmintorList().then(({ data }) => {
      state.allNums = (data.data?.admintorList.length as number) - 1
    })

    // 获取分页数据
    getAdmintorPageList(
      state.pageSize,
      (state.currentPage - 1) * state.pageSize
    ).then(({ data }) => {
      state.admintorList = data.data
        ?.admintorList as Array<RequsetAdmintorListDataTypes>
    })
  } else {
    searchAdmintorList(state.serchName).then(({ data }) => {
      state.admintorList = data.data
        ?.admintorList as Array<RequsetAdmintorListDataTypes>
      state.allNums = data.data?.allNums as number
    })
  }
}

listRendering()
// 搜索列表
const serchList = () => {
  state.journalListTypeOrlist = false
  // searchAdmintorList
  listRendering(state.journalListTypeOrlist)
}

// 切换分页显示条数
const handleSizeChange = (val: number) => {
  state.pageSize = val
  listRendering(state.journalListTypeOrlist)
}

// 切换分页页数
const handleCurrentChange = (val: number) => {
  state.currentPage = val
  listRendering(state.journalListTypeOrlist)
}

// 权限更改
/**
 *
 * @param type 更改类型 0 => 删除权限 1 => 发布权限 2 => 修改权限
 */
const powerChange = (type: number, userInfo: RequsetAdmintorListDataTypes) => {
  updateAdmintorAuthority(userInfo._id, type).then(({ data }) => {
    if (data.code)
      return ElMessage({
        type: 'warning',
        message: data.mes
      })
    ElMessage({
      type: 'success',
      message: data.mes
    })
  })
}

// 删除
const handleDelete = (userID: string) => {
  ElMessageBox.confirm('确认要删除该管理员吗?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const { data } = await deleteAdmintor(userID)
      if (data.code)
        return ElMessage({
          type: 'warning',
          message: data.mes
        })
      ElMessage({
        type: 'success',
        message: data.mes
      })
      // 本地删除
      const findIndex = state.admintorList.findIndex(
        (item) => item._id === userID
      )
      state.admintorList.splice(findIndex, 1)
      state.allNums -= 1
    })
    .catch(() => {
      console.log()
    })
}
</script>

<style scoped lang="less">
#manage {
  border-radius: 16px;
  padding: 20px;
  overflow: hidden;
  h2 {
    color: #f56c6c;
    margin-bottom: 20px;
  }
  .list {
    margin-top: 15px;
    display: flex;
    align-items: center;
    .tit {
      color: #393939;
      font-size: 13px;
      width: 70px;
    }
  }
  .submit {
    margin: 20px 0;
    height: 38px;
    background-color: #f93a08;
    border-radius: 16px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 5px;
    &:hover {
      background-color: rgb(204, 44, 5);
    }
  }
  .el-table {
    img {
      width: 50px;
      height: 50px;
    }
  }
  .pagination {
    margin-top: 10px;
  }
}
</style>
